<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")
  cvs.width = 400;
  cvs.height = 400;
  const c2d = cvs.getContext("2d");

  // 半径
  let r = 100;
  // 位置
  let x = 200;
  let y = 200;

  // 初始绘制表盘信息
  clock(r, x, y);

  // 计时器重复绘制表盘信息
  setInterval(()=>{
    // 绘制之前，先清除画布
    c2d.clearRect(0, 0, cvs.width, cvs.height);
    c2d.beginPath();
    // 重新绘制
    clock(r, x, y);
  }, 1000);

  function clock(r, x, y){
    // 绘制表盘
    c2d.arc(x, y, r, 0, 2*Math.PI);
    c2d.stroke();

    // 画刻度
    for(let i=0;i<60;i++){
      const leg = i%5===0 ? -10 : -5;
      line(c2d, -r, leg, 360 / 60 * i);
    }

    // 获取日期对象
    const d = new Date();
    const h = d.getHours();
    const m = d.getMinutes();
    const s = d.getSeconds();

    // 时针
    line(c2d, 10, 50, 360 / 12 * h + (360/12/60*m));
    // 分针
    line(c2d, 10, 65, 360 / 60 * m + (360/60/60*s));
    // 秒针
    line(c2d, 10, 90, 360 / 60 * s);

    // 绘制圆心
    c2d.beginPath();
    c2d.arc(200, 200, 5, 0, 2*Math.PI);
    c2d.fill();

    // 品牌
    c2d.textAlign = "center";
    c2d.textBaseline = "middle";
    c2d.font = "12px 黑体";
    c2d.fillText("劳力士", 200, 216);

    // 绘制数字
    for(let i=-2;i<10;i++){
      c2d.font = "16px 黑体";
      let x = (r-20) * Math.cos(dth(360/12*i)) + 200;
      let y = (r-20) * Math.sin(dth(360/12*i)) + 200;
      c2d.fillText(i+3, x, y);
    }
  }

  // line(c2d, 起始位置, 长度, 旋转角度)
  function line(c2d, start, leg, deg){
    c2d.beginPath();
    c2d.save();
    c2d.translate(200, 200);
    c2d.rotate( dth(deg) );
    c2d.moveTo(0, start);
    c2d.lineTo(0, -leg + start);
    c2d.restore();
    c2d.stroke();
  }

  // dth(角度);   // 得到弧度
  function dth(deg){
    return Math.PI / 180 * deg;
  }
  
</script>
</html>